<template>
  <div>
    <div class="header">
      <button class="btn1"><</button>
      <input type="text" placeholder="请输入搜索关键词">
      <button class="btn2">></button>
    </div>

    <div class="select">
     <ul>
      <li><select name="" id=""> 区域 </select></li>
      <li><select name="" id=""> 区域 </select></li>
      <li><select name="" id=""> 区域 </select></li>
      <li><select name="" id=""> 区域 </select></li>
     </ul>
    </div>

    <div class="body">
    <ul>
      <li v-for="item in renderList" :key="item.houseCode">
        <div class="left">照片</div>
        <div class="right">
          <h4>{{item.title}}</h4>
          <p>{{item.desc}}</p>
          <p>{{item.tags[0]}}</p>
          <span>{{item.price}}/月</span>
        </div>
      </li>
    </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Search',
  props: {},
  data(){
   return{
    renderList:null
   }
  },
async created(){
const{data}=await axios('http://liufusong.top:8080/houses')
console.log(data);
this.renderList=data.body.list
}
}
</script>

<style scoped lang="less">
.header{
  display: flex;
  justify-content: center;
  padding-top: 30px;
  padding-left: 10px;
  margin-bottom: 20px;
  .btn1,.btn2{
    margin-right: 10px;
    height: 30px;
    width: 30px;
  }
  .btn2{
    margin-left: 10px;
  }
 input{
  flex:1
 }
}
.select{
  padding:0 10px ;
  padding-bottom: 20px;
  border-bottom:1px solid #ccc ;
  ul{
    display: flex;
    justify-content: space-around;
    li{
      select{
        width: 50px;
      }
    }
  }
}

.body{
  padding: 20px 0;
  margin: 0 10px;
  
ul {
    li {
      display: flex;
      align-items: center;
      height: 140px;
      background-color: #fff;
      margin-bottom: 10px;
      padding-left: 14px;
      border-bottom:1px solid #ccc ;
      .left {
        width:112px;
        height:112px;
        background-color: pink;
        margin-right: 14px
      }
      .right {
        flex: 1;
        h4 {
          font-size: 14px;
          margin-bottom: 5px;
          margin-top: 0px;
        }
        p {
          font-size: 12px;
          color: #aaaaaa;
        }
        span {
          font-size: 12px;
        }
      }
    }
}
}
</style>